<script setup lang="ts">
import myUser from "@/composables/myUser.ts";
import dayjs from "dayjs";
const {users,getUsers,switchFreeze,delUser} = myUser();
const route = useRoute();
await getUsers({page:route.query.page || 1});

const columns = [
  {id:'id',label:'ID',width:50},
  {id:'avatar',label:'头像',type:'image'},
  {id:'name',label:'用户名'},
  {id:'email',label:'邮箱',type:'substr'},
  {id:'phone',label:'手机'},
  {id:'created_at',label:'创建时间',type:'date'},
  {id:'',label:'操作',type:'buttons'},
]
</script>

<template>
<main class="users"  v-if="users">
  <el-card shadow="never" >
    <el-table :data="users.data" stripe border style="width: 100%" table-layout="fixed">
      <el-table-column align="center"
          v-for="col in columns"
          :prop="col.id"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          #default="{row}"
      >
        <template v-if="col.type=='image'">
          <el-avatar shape="square" :size="80" :src="row[col.id]" fit="scale-down"/>
        </template>
        <template v-if="col.type=='substr'">
          <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{row[col.id]}}</span>
        </template>
        <template v-if="col.type=='date'">
          <span>{{dayjs(row[col.id]).format('YYYY-MM-DD')}}</span>
        </template>
        <template v-if="col.type=='buttons'">
          <el-button-group size="small" v-if="row['id'] != 1">
            <el-button type="primary" @click="$router.push({name:'admin.user.detail',params:{u_id:row['id']}})">
              <icon-doc-detail />
            </el-button>
            <el-button type="warning" v-if="row['is_freeze'] == 'no'" @click="switchFreeze(row['id'],'no')">
              <icon-lock />
            </el-button>
            <el-button type="success" v-else @click="switchFreeze(row['id'],'yes')">
              <icon-unlock />
            </el-button>
            <el-button type="danger" @click="delUser(row['id'])"><icon-delete /></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <my-pagination :per_page="users.meta.per_page" :total="users.meta.total"
                 @currentChange="$router.push({ name: 'user.index',params:{u_id:$route.params?.u_id}, query: { page: $event } })"
  />
</main>
</template>

<style lang="scss" scoped>
main.users{

}
</style>